<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吃啥呢~~</title>
    <style>
        .container_big {
            width: 100%;
            /* height: 300px; */
            border-radius: 20px;
            border: 1px solid #ccc;
            margin: 0 auto;
            padding: 20px;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
        }

        .container {
            width: 100%;
            /* height: 300px; */
            border-radius: 20px;
            /* border: 1px solid #ccc; */
            margin: 0 auto;
            /* padding: 20px; */
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
        }

        .container .lis {
            border: 2px solid #cccccc00;
            max-width: 121px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding: 10px;
            border-radius: 10px;
            margin-bottom: 10px;
            margin-right: 10px;
            background-color: #ff404085;
        }

        .btn_box {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }

        .btn_box .changeColor {
            height: 40px;
            border: none;
            border-radius: 5px;
            background-color: #409eff;
            font-size: 12px;
            color: #fff;
            margin-right: 20px;
            cursor: pointer;
        }

        .changeColor:focus,
        .refresh:focus {
            border: 2px solid rgb(243, 32, 197);
        }

        .refresh {
            border-radius: 50%;
            width: 40px;
            height: 40px;
            border: none;
            background-color: #409eff;
            font-size: 12px;
            color: #fff;
            margin-right: 20px;
            cursor: pointer;
        }

        .stop {
            display: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            border: none;
            background-color: #409eff;
            font-size: 12px;
            color: #fff;
            margin-right: 20px;
            cursor: pointer;
        }

        .add {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }

        .add .add_btn {
            width: 60px;
            height: 30px;
            border: none;
            border-radius: 5px;
            background-color: #409eff;
            font-size: 12px;
            margin-left: 10px;
            color: #fff;
            cursor: pointer;
        }

        .add input {
            width: 50%;
            height: 30px;
            border-radius: 25px;
        }
    </style>
</head>

<body>

    <div class="container_big">
        <div class="container">
        </div>
    </div>
    <div class="btn_box">
        <button class="changeColor" onclick="chooseBtn(0)">改为随机颜色</button>
        <!-- <button class="refresh" onclick="chooseBtn(1)">刷新颜色</button> -->
        <button class="refresh" onclick="chooseBtn(2)">恢复颜色</button>
        <button class="refresh" onclick="chooseBtn(3)">开始随机</button>
        <button class="stop" onclick="chooseBtn(4)">停止</button>
    </div>
    <div class="add">
        <input type="text" autofocus placeholder="请输入要添加的选项">
        <button class="add_btn" onclick="addItems()">添加</button>
    </div>

    <script>
        let status = -1
        let index = 0
        let timer = null

        // 定义一个吃的数组
        let items = [
            // '淀粉肠',
            // '鱼你在一起',
            // '猪蹄',
            // '奶茶',
            // '任意一顿好吃的',
            // '烤串'
        ]
        // 获取容器
        let container = document.querySelector('.container')
        items = JSON.parse(localStorage.getItem('items')) || []
        // 遍历数组
        function initItems() {
            // 把本地中存的items赋值给items
            // 清空容器
            container.innerHTML = ''

            items.forEach(item => {
                // 创建一个div
                let div = document.createElement('div')
                // 设置div的类名
                div.className = 'lis'
                // 设置div的文本内容
                div.innerText = item
                // 将div添加到容器中
                container.appendChild(div)
            })

        }

        function chooseBtn(status) {

            if (status === 0 || status === 1) {
                if (items.length == 0) {
                    alert('请添加选项')
                    return
                }
                changeColor()
            }

            let lis = document.querySelectorAll('.lis')
            switch (status) {
                case 2:
                    if (items.length == 0) {
                        alert('请添加选项')
                        return
                    }
                    lis.forEach(div => {
                        div.style.backgroundColor = '#ff404085'
                    })
                    break;
                case 3:
                    if (items.length == 0) {
                        alert('请添加选项')
                        return
                    }
                    if (items.length == 1) {
                        alert('请添加至少2个选项')
                        return
                    }
                    // 打开停止按钮
                    if (timer) clearInterval(timer)
                    // 清除定时器
                    document.querySelector('.stop').style.display = 'block'
                    // 把items保存到本地
                    localStorage.setItem('items', JSON.stringify(items))
                    timer = setInterval(() => {
                        changeBorder()
                    }, 100);
                    break;
                case 4:
                    // 清除定时器
                    clearInterval(timer)
                    alert(lis[index - 1].innerHTML)
                    index = 0
                    // 关闭停止按钮
                    document.querySelector('.stop').style.display = 'none'
                    break;

                default:
                    break;
            }
        }
        function changeBorder() {
            let lis = document.querySelectorAll('.lis');
            lis.forEach(li => li.style.border = '2px solid #cccccc00');

            if (index === 0) {
                lis[lis.length - 1].style.border = '2px solid #cccccc00';
            } else {
                lis[index - 1].style.border = '2px solid #cccccc00';
            }


            lis[index].style.border = '2px solid red';
            index++;

            if (index === lis.length) {
                index = 0;
            }
        }

        function changeColor() {
            if (items.length == 0) {
                alert('请添加选项')
                return
            }
            // 缓存lis元素
            let lis = document.querySelectorAll('.lis');
            lis.forEach(div => {
                // 提取随机数计算
                let r = Math.floor(Math.random() * 256);
                let g = Math.floor(Math.random() * 256);
                let b = Math.floor(Math.random() * 256);
                div.style.backgroundColor = `rgb(${r},${g},${b})`;
            });
        }
        initItems()
        function addItems() {

            let input = document.querySelector('.add input')
            let value = input.value
            if (value) {
                items.push(value)
                console.log('items: ', items);
                initItems()
                input.value = ''
            }

        }



    </script>
</body>

</html>